import React, { useEffect, useState } from 'react'

export default function MultiEffectDemo() {
  const [count, setCount] = useState(0);
  const [isLogin, setIsLogin] = useState(false)

  useEffect(() => {
    console.log('修改DOM~~~~~~')
  }, [count]) //表示只在count发生变化时调用
  
  useEffect(() => {
    console.log('订阅了~~~~~~')
  }, []) //空数组表示不依赖任何变化，只在组件渲染时调用一次

  useEffect(() => {
    console.log('网络请求~~~~~~')
  }, [])

  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <hr />
      
      <h2>{isLogin ? '欢迎~~~~~' : "请登录"}</h2>
      <button onClick={e => setIsLogin(!isLogin)}>登录/注销</button>
    </div>
  )
}
